Al llamar a la función play() , puedo ver que hay un retraso notable de 0,0 a 0,5 segundos antes de que comience a reproducirse.
Estoy enfrentando algunos problemas al usar el siguiente detector de eventos
media.addEventListener( "play", function(){ toggle_class(button[0], true); // compute animations for seekbar time_to_compute = media.duration - media.currentTime; progress.style = "transition: width linear " + time_to_compute + "s; width:100%;"; } );En lugar de cambiar la posición de la barra en el cambio de hora, la cambio una vez y la animo usando una transición. El problema es que la transición comienza ANTES de que se reproduzca el video (0.0~0.5 segundos). Este problema ocurre tanto en Chrome como en Firefox.
¿Hay un evento de javascript para cuando el video realmente se reproduce?
El evento timeupdate le permite saber cuándo cambia la propiedad currentTime , por lo que puede esperar para iniciar la animación hasta que se produzca la primera timeupdate . También está el evento de playing que se activa cuando los medios comienzan a reproducirse por primera vez o reanudan la reproducción después de una pausa, por lo que es posible que pueda usarlo.
Puede encontrar una lista completa de eventos HTMLMediaElement en MDN .
Dicho esto, sería muy cauteloso con una animación que se ejecuta en paralelo con el video, es probable que se desincronicen. En su lugar, probablemente usaría timeupdate con requestAnimationFrame para actualizar el indicador de progreso.